<script setup>
import { computed } from 'vue';
import YLoopMenu from './YLoopMenu.vue';
import {useFormModal} from "@/hooks/modal"
import {BASE_PERMISSION,ALL_PERMISSION} from "@/constants/enums/premissionEnums";
import PremissionModal from './premissionModal.vue'
const {openModal} = useFormModal()
defineOptions({
  name: 'YCollapsePanel',
});
const props = defineProps({
  menu: {
    type: Object,
    default: () => ({}),
  },
  rowKey: {
    type: String,
    default: '',
  },
  openKeys: {
    type: Array,
    default: () => {
      return [];
    },
  },
  permissions: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const hasChild = computed(() => {
  return props.menu.children && props.menu.children.length > 0;
});
const isOpen = computed(() => {
  return props.openKeys.includes(props.rowKey);
});
const currentPermissions = computed(() => {
  return (
    props.permissions.find((item) => {
      return item.menuId == props.menu.id;
    }) || {
      menuId: props.menu.id,
      actions: [],
    }
  );
});
const checkPermission = (val) => {
  const exist = props.permissions.find((item) => {
    return item.menuId === props.menu.id;
  });
  if (!exist) {
    props.permissions.push({
      menuId: props.menu.id,
      actions: val,
    });
  }
};
const showMorePermission = ()=>{
  console.log("currentPermissions",currentPermissions.value.actions);


  openModal(PremissionModal,currentPermissions.value.actions).then(actions=>{
    currentPermissions.value.actions = actions;
    console.log("currentPermissions",currentPermissions.value.actions);
    console.log("actions",actions);


  })
}
</script>

<template>
  <a-collapse-panel
    class="y-collapse-panel mb-3 !rounded-lg !border-1 !border-solid"
    :key="rowKey"
    :show-arrow="false"
    :class="[hasChild ? 'cursor-pointer' : 'cursor-default']"
  >
    <template v-if="hasChild">
      <YLoopMenu
        class="has-child"
        :menus="menu.children"
        :permissions="permissions"
      ></YLoopMenu>
    </template>
    <template #header>
      <div
        class="flex flex-1 justify-between"
        :class="hasChild ? 'has-child' : ''"
      >
        <div class="left">
          <span v-if="hasChild">
            <i
              class="fas text-indigo-500 mr-2"
              :class="[isOpen ? 'fa-folder-open' : 'fa-folder']"
            ></i>
          </span>
          <span v-else>
            <i class="fas fa-file-alt text-green-400 mr-2"></i>
          </span>
          {{ menu.title }}
        </div>
        <div class="right">
          <template v-if="!hasChild">
            <a-checkbox-group
              v-model:value="currentPermissions.actions"
              :options="BASE_PERMISSION"
              @change="checkPermission"
            ></a-checkbox-group>
            <a-button type="link" @click="showMorePermission">更多权限</a-button>
          </template>
          <template v-else>
            <i
              class="fas fa-chevron-right transition-all"
              :class="[isOpen ? ' rotate-[-90deg]' : '']"
            ></i>
          </template>
        </div>
      </div>
    </template>
  </a-collapse-panel>
</template>

<style scoped lang="less">
.y-collapse-panel {
  :deep(.ant-collapse-header) {
    cursor: inherit;
  }

  :deep(.ant-collapse-header) {
    background-color: transparent;
  }

  :deep(.ant-collapse-content) {
    .ant-collapse-content-box {
      padding-top: 3px;
    }
  }
  border-color: var(--theme-border) !important;
}
</style>
